<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SlideItMoo - MooTools 1.2 image slider</title>
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />

<script language="javascript" type="text/javascript" src="script/mootools-1.2-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/SlideItMoo.js"></script>
<script language="javascript" type="text/javascript">
window.addEvent('domready', function(){
	/* thumbnails example , div containers */
	new SlideItMoo({itemsVisible:5, // the number of thumbnails that are visible
					currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
					thumbsContainer: 'thumbs2',
					elementScrolled: 'thumb_container2',
					overallContainer: 'gallery_container2'});
});
</script>
</head>

<body>
<div id="container">
	<h1><strong>SlideItMoo</strong> - Thumbnail / banner slider with MooTools 1.2</h1>
	
	<p>Fancy good looking way to display the thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.</p>
	<p>
		<strong>Prerequisites for this example:</strong>
		<ol>
			<li>MooTools 1.2 core and MooTools 1.2 more - <a href="http://mootools.net/">visit mootools.net</a></li>
			<li>* Slimbox 1.65 - <a href="http://www.digitalia.be/software/slimbox">visit homepage</a></li>
		</ol>
	</p>
	
	<p>
		<strong>Tested on:</strong>
		<ul>
			<li>IE 6</li>
			<li>Firefox 2, Firefox 3</li>
			<li>Google Chrome</li>
			<li>Opera 9.5</li>
		</ul>
	</p>
	
	<p>
		<strong>Installation</strong>: 
		<ol>
			<li>insert into the &lt;head&gt;&lt;/head&gt; section of your html document the CSS ( from styles.css the section between <strong>/* thumbnail slider begin */</strong> and <strong>/* thumbnail slider end */</strong> ) and JavaScript files ( mootools-1.2-core.js, mootools-1.2-more.js, slimbox.js and gallery_slide.js )</li>
			<li>add the HTML code contained between <strong>&lt;!--thumbnails slideshow begin--&gt;</strong> and <strong>&lt;!--thumbnails slideshow end--&gt;</strong> to your page</li>
		</ol>
	</p>
	
	<p>For best results, please make sure that all your thumbnails have the same size.</p>
	
	<p>
		<strong>Demo 1 - thumbnails slider, only links</strong>:<br />
		Use the forward - back buttons or mouse wheel.
	</p>	
	<!--thumbnails slideshow begin-->
	<div id="gallery_container">	
		<div id="thumb_container">			
			<div id="thumbs">
				<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302018.jpg" width="84" height="84" /></a>	
				<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302028.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302030.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DC080302040.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302040.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02825.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02825.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02841.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02841.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02865.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02865.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02891.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02891.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02916.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02916.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02959.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02959.jpg" width="84" height="84" /></a>	
				<a href="gallery/full/DSC03032.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC03032.jpg" width="84" height="84" /></a>	
			</div>			
		</div>
	</div>	
	<!--thumbnails slideshow end-->
	<p>
		<strong>Demo 2 - thumbnails slider, div containers</strong>:<br />
		Use the forward - back buttons or mouse wheel.
	</p>	
	<!--thumbnails slideshow begin-->
	<div id="gallery_container2">	
		<div id="thumb_container2">			
			<div id="thumbs2">
				<div class="thumbnail">
                	<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DC080302018.jpg" width="84" height="84" /></a>
                    Nam porta tellus ac urna    
                </div>	
				<div class="thumbnail">
                	<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DC080302028.jpg" width="84" height="84" /></a>
                    Praesent pellentesque eros nec nisl    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DC080302030.jpg" width="84" height="84" /></a>
                    Vestibulum eleifend scelerisque purus    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DC080302040.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DC080302040.jpg" width="84" height="84" /></a>
                    Felis nulla iaculis lacus    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC02825.jpg" rel="lightbox[galerie]" target="_blank">
                		<img src="gallery/thumb/DSC02825.jpg" width="84" height="84" /></a>
                    Quisque neque. Donec quam ante, pulvinar vitae    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC02841.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DSC02841.jpg" width="84" height="84" /></a>
                    Suspendisse sodales turpis. Aliquam lectus    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC02865.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DSC02865.jpg" width="84" height="84" /></a>
                    Praesent pellentesque eros nec nisl    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC02891.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DSC02891.jpg" width="84" height="84" /></a>
                     Nam porta tellus ac urna    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC02916.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DSC02916.jpg" width="84" height="84" /></a>
                    Praesent pellentesque eros nec nisl    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC02959.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DSC02959.jpg" width="84" height="84" /></a>
                    Vestibulum eleifend scelerisque purus    
                </div>
				<div class="thumbnail">
                	<a href="gallery/full/DSC03032.jpg" rel="lightbox[galerie]" target="_blank">
                    	<img src="gallery/thumb/DSC03032.jpg" width="84" height="84" /></a>
                    Suspendisse sodales turpis. Aliquam lectus    
                </div>	
			</div>			
		</div>
	</div>	
    
	<!-- banner rotator start -->
	<p>
		<strong>Demo 3 - banner rotator</strong>:<br />	
		On mouse over the slider stops.
	</p>
	<!--thumbnails slideshow begin-->
	<div id="banners_container">	
		<div id="banner_container">			
			<div id="banners">
				<a href="#" target="_blank"><img src="banners/1.jpg" width="557" height="134" /></a>	
				<a href="#" target="_blank"><img src="banners/2.jpg" width="557" height="134" /></a>	
				<a href="#" target="_blank"><img src="banners/3.jpg" width="557" height="134" /></a>					
			</div>			
		</div>
	</div>	
	<!-- banner rotator end -->
	
	<p class="notes">
		*It is not neccesary to use Slimbox to dislplay the full image. You can use other Lightbox script written with MooTools 1.2 or write your own.
	</p>
	
</div>	
	
</body>
</html>
